<template>
	<!-- 防排水 -->
	<view class="p-10">
		<u-collapse :value="showMoreKeys" ref="collapse">
			<u-collapse-item name="1" class="m-t-10 bg-white">
				<template #title>
					<view class="content-item-title"><text class="title-txt">1#水池</text></view>
				</template>
				<my-grid :list="list" :decimals="2" :col="2"></my-grid>
				<view class="fw m-t-10 tc"> 近一天水位趋势分析 </view>
				<view class="charts-box">
					<qiun-data-charts type="area" :opts="opts" :chartData="chartData" />
				</view>
			</u-collapse-item>
			<u-collapse-item name="2" class="m-t-10 bg-white">
				<template #title>
					<view class="content-item-title"><text class="title-txt m-r-10">1#水泵</text><up-text text="在线" :bold="true" color="#27B77E" size="16"></up-text></view>
				</template>
				<view class="p-10 flex">
					<text style="color: #555D6F; font-weight: bold;">控制模式</text>
					<view class="flex m-l-10" v-for="(item,index) in [{name: '远程',status: 0},{name: '就地',status: 1}]">
						<text>{{item.name}}</text>
						<text class="dot m-l-10" :style="{background: item.status == 0 ? '#27B77E' : '#EF514D'}"></text>
					</view>
				</view>
				<my-grid :list="list1" :decimals="2"></my-grid>
			</u-collapse-item>
			<u-collapse-item name="3" class="m-t-10 bg-white">
				<template #title>
					<view class="content-item-title"><text class="title-txt m-r-10">2#水泵</text><up-text text="在线" :bold="true" color="#27B77E" size="16"></up-text></view>
				</template>
				<view class="p-10 flex">
					<text style="color: #555D6F; font-weight: bold;">控制模式</text>
					<view class="flex m-l-10" v-for="(item,index) in [{name: '远程',status: 0},{name: '就地',status: 1}]">
						<text>{{item.name}}</text>
						<text class="dot m-l-10" :style="{background: item.status == 0 ? '#27B77E' : '#EF514D'}"></text>
					</view>
				</view>
				<my-grid :list="list1" :decimals="2"></my-grid>
			</u-collapse-item>
			<u-collapse-item name="4" class="m-t-10 bg-white">
				<template #title>
					<view class="content-item-title"><text class="title-txt m-r-10">1#管道</text><up-text text="在线" :bold="true" color="#27B77E" size="16"></up-text></view>
				</template>
				<my-grid :list="list2" :decimals="2"></my-grid>
			</u-collapse-item>
			<u-collapse-item name="5" class="m-t-10 bg-white">
				<template #title>
					<view class="content-item-title"><text class="title-txt m-r-10">2#管道</text><up-text text="在线" :bold="true" color="#27B77E" size="16"></up-text></view>
				</template>
				<my-grid :list="list2" :decimals="2"></my-grid>
			</u-collapse-item>
		</u-collapse>
	</view>
</template>

<script setup>
	const showMoreKeys = ref([1, 2, 3, 4, 5])
	let list = ref([{
			title: '当前水位',
			value: '1.33',
			unit: 'm'
		}, {
			title: '当前水量',
			value: '233.4',
			unit: 'm³'
		}]),
		list1 = ref([{
			title: '今日排水量',
			value: '2.5',
			unit: 'm³'
		}, {
			title: '阀门开度',
			value: '100',
			unit: '%'
		}, {
			title: '正压',
			value: '100',
			unit: 'Mpa'
		}, {
			title: '负压',
			value: '20',
			unit: 'Kpa'
		}, {
			title: '前轴温度',
			value: '25.3',
			unit: '℃'
		}, {
			title: '后轴温度',
			value: '25.4',
			unit: '℃'
		}]),
		list2 = ref([{
			title: '当前流速',
			value: '2.5',
			unit: 'm/s'
		}, {
			title: '当前流量',
			value: '45',
			unit: 'm³/h'
		}, {
			title: '累计流量',
			value: '90',
			unit: 'm³'
		}]),
		chartData = ref({}),
		opts = {
			color: ["#5589FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
			padding: [15, 15, 0, 15],
			enableScroll: false,
			dataLabel: false,
			legend: {
				show: false
			},
			xAxis: {
				disableGrid: true
			},
			yAxis: {
				gridType: "dash",
				dashLength: 2,
				showTitle: true,
				data: [{
					min: 0,
					title: 'm'
				}]
			},
			extra: {
				area: {
					type: "curve",
					opacity: 0.2,
					addLine: true,
					width: 2,
					gradient: true,
					activeType: "hollow"
				}
			}
		}
	const getServerData = () => {
		setTimeout(() => {
			let res = {
				categories: ["00:00", "06:00", "12:00", "18:00", "00:00"],
				series: [{
					name: "",
					data: [2, 8, 5, 7, 4]
				}]
			};
			chartData.value = JSON.parse(JSON.stringify(res));
		}, 500);
	}
	getServerData()
</script>

<style lang="scss" scoped>
	.dot {
		display: block;
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		background-color: #27B77E;
	}
</style>